<template>
  <div class="Nation">
    <div class="div">
      <span class="el-icon-zoom-in"></span>
    <input v-model="value" type="text" placeholder="请输入搜索的内容" class="ipt" @keydown.enter="enter(value)">
    <router-link to="/">
     <span class="p">取消</span>
    </router-link>
    </div>
    <div class="Nation-ul">
       <span class="text1">{{text1}}模板</span>
       <span class="text2">最新&nbsp;|</span>
       <span class="text2">最热</span>
    </div>
     <ul class="uli-box">
        <li v-for="(item,index) in list1" :key="index"  @click="btn(item);ipt(index)" :class="{activity: activityindex == index}">
      {{item.kindTitle}}
        </li>
      </ul>
    <div class="Nation-box">
      <ul class="uli">
        <li v-for="(b, i) in list" :key="i+789">
          <router-link :to="{
              path:'/detailpage/'+b.designTemplateId}">
          <img :src="b.designTemplateThumbUrls[0]" alt="" />
          </router-link>
        </li>
      </ul>
      <ul class="uli">
        <li v-for="(item,index) in list2" :key="index">
          <img :src="item.designTemplateThumbUrls[0]" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value:'',
      text1:'',
      list: [],
      list1: [],
      list2:[],
      oldssarr: [],
      activityindex:0
    };
  },
  created() {
    this.$ajax
      .get(
        `/abc/template/wxSmallAppSearch.do?_dataType=json&kw=${this.$route.params.kw}`
      )
      .then((res) => {
        this.text1 = res.data.body.totalCount
        this.list = res.data.body.templates;
        // console.log(this.list);
      });
      this.$ajax
      .post(
        "/abc/designkind/getDesignKindBasicInfo.do?_dataType=json&client_type=40&type=2&_dataClientType=3"
      )
      .then((res) => {
          this.list1= res.data.body.data.secondLabel;
          console.log(this.list1);
        this.list1.unshift({ kindTitle:"全部", repositoryThirdKindId:444, templateCount: 216 });
      });
  },
  methods: {
    enter(value){
       this.$router.push('/national/' + value)
            this.value = value
            this.$ajax.get(`/abc/template/wxSmallAppSearch.do?_dataType=json&kw=${this.value}`).then(res => {
                this.text1 = res.data.body.totalCount
                this.list = res.data.body.templates
            })
            this.oldssarr.push(this.value)
            this.value = ''
            this.isShow = true
    },
     btn(item){
       this.list = '';
       this.item = item.kindId;
       console.log(this.item);
       this.$ajax
        .get(
          `/abc/template/wxSmallAppSearch.do?_dataType=json&client_type=40&pageNo=1&pageSize=20&kw=${this.$route.params.kw}&second_kind_id=${this.item}`
        )
        .then((res) => {
         console.log(res);
         this.list2 = res.data.body.templates;
         this.text1 = res.data.body.totalCount
         console.log(this.list2);
        });
  },
  ipt(index){
    this.activityindex = index;
  }
}
};
</script>

<style scoped>
.activity{
	border-bottom: 1px solid rgb(87, 76, 236);
	color: #333;
}
.Nation-ul{
  width: 102%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}
.text1{
  display: inline-block;
  width: 102%;
  height: 40px;
  text-align: left;
  line-height: 40px;
  background-color: #fff;
  margin-left: 10px;
  font-size: 20px;
}
.text2{
  display: inline-block;
  width: 56px;
  line-height: 40px;
}
.text2:nth-child(3){
   margin-right: 10px;
}
.div{
  width: 102%;
  height: 65px;
  background-color: #ffffff;
}
.ipt{
     width: 76%;
     height: 40px;
     background-color: #eeeeee;
     border-radius: 10px;
     border: none;
     outline: none;
     padding-left: 30px;
     position: relative;
     left: -17px;
     margin-top: 14px;
   }
   .el-icon-zoom-in{
     display: inline-block;
     color: #333;
     font-size: 20px;
     position: absolute;
     top: 25px;
     left: 20px;
     z-index: 99;
   }
   .p{
     width: 32px;
     position: absolute;
     top: 21px;
     right: 1px;
   }
.uli {
  list-style: none;
  width: 102%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.uli li {
  width: 43%;
  margin:15px 10px;
}
.uli li img {
  width: 100%;
}
.uli-box{
  list-style: none;
  width: 102%;
  height: 40px;
  line-height: 40px;
  background-color: #ffffff;
  white-space: nowrap;
  overflow: auto;
  display: flex;
  color: #999;
}
.uli-box li{
  width: 25%;
  margin: 0px 10px;
}
.uli-box li span{
  display: inline-block;
  margin: 0px 10px;
}
</style>